<template>
  <div class="page-container titlebar-page">
    <TitleBar title="辅助" noback></TitleBar>
    <div class="assist-bg">
      <div class="switch-list">
        <inline-x-switch @on-change="switchChange(1)" title value="1"></inline-x-switch>
        <inline-x-switch @on-change="switchChange(2)" title value="2"></inline-x-switch>
        <inline-x-switch @on-change="switchChange(3)" title value="3"></inline-x-switch>
      </div>
      <div class="start-game">
        <img class="btn-img" @click="startGame" src="../../assets/images/assist/start.png" alt>
      </div>
      <img class="bg" src="../../assets/images/assist/bg.jpg" alt srcset>
    </div>
    <div class="assist-actions">
      <div class="assist-item" @click="gotoRoutePage('/heroinfos')">
        <zodiac-cancer-icon :size="iconSize" style="color:#823cff"></zodiac-cancer-icon>
        <span class="title">英雄资料</span>
      </div>
      <div class="assist-item" @click="gotoRoutePage('/equipinfos')">
        <shield-cross-outline-icon :size="iconSize" style="color:#2137f7"></shield-cross-outline-icon>
        <span class="title">装备大全</span>
      </div>
      <div class="assist-item" @click="gotoRoutePage('/inssim')">
        <hexagon-slice-six-icon :size="iconSize" style="color:#098ab5"></hexagon-slice-six-icon>
        <span class="title">铭文模拟</span>
      </div>
      <div class="assist-item" @click="gotoRoutePage('/heroranking')">
        <trophy-icon :size="iconSize" style="color:#e3e140"></trophy-icon>
        <span class="title">英雄排行</span>
      </div>
      <div class="assist-item" @click="gotoRoutePage('/strategy')">
        <format-indent-increase-icon :size="iconSize" style="color:#35d4ab"></format-indent-increase-icon>
        <span class="title">上分攻略</span>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBar from "../../components/TitleBar";
import { InlineXSwitch, AlertModule } from "vux";
export default {
  data() {
    return {
      iconSize: 32
    };
  },
  mounted() {},
  methods: {
    gotoRoutePage(route) {
      this.$router.push(route);
    },
    gotoHeroRankingPage() {
      this.$router.push("/heroranking");
    },
    gotoHeroInfoPage() {
      this.$router.push("/heroinfos");
    },
    switchChange(val) {
      // AlertModule.show({
      //   title: "功能正在开发中",
      //   content: "敬请期待...",
      // });
    },
    startGame() {
      // AlertModule.show({
      //   title: "功能正在开发中",
      //   content: "敬请期待...",
      //   onShow() {
          // console.log("Module: I'm showing");
        // },
        // onHide() {
          // console.log("Module: I'm hiding now");
        // }
      // });
    }
  },
  components: {
    TitleBar,
    InlineXSwitch
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100%;

  .assist-bg {
    width: 100%;
    height: 45%;
    position: relative;
    img.bg {
      position: absolute;
      top: -.8rem;
      left: 0;
      width: 100%;
      // height: 100%;
    }
    .switch-list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 3rem;
      width: 100%;
      position: absolute;
      z-index: 89;
      top: 6.5rem;
    }
    .start-game {
      position: absolute;
      width: 100%;
      z-index: 99;
      bottom: 1rem;
      text-align: center;
      height: 4rem;

      img.btn-img {
        width: 6.4rem;
      }
    }
  }

  .assist-actions {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    // border-top: 1px solid #f4f4f4;
    // border-left: 1px solid #f4f4f4;
    .assist-item {
      // border-right: 1px solid #f4f4f4;
      // border-bottom: 1px solid #f4f4f4;
      box-sizing: border-box;
      flex-basis: 33.33%;
      height: 6.8rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      .title {
        position: relative;
        bottom: 0.4rem;
      }
    }
  }

  .ins-sim {
    width: 90px;
    height: 90px;
    border: 2px solid #459;
    border-radius: 12px;
  }
}
</style>
